<script setup>
import { ref, onMounted, reactive, toRefs} from 'vue'
import {message} from 'ant-design-vue'
import router from '@/router'
import {
  PermissionList,
  getPermission,
  getPermissionList,
  getRoleList,
  delRole
} from '@/api/system/permission.js'
import '@/assets/iconfont.js'
// const activeKey = ref('1')

/* 手写树形开始 */
const dataList = ref([])

/* 树形列表数据 */
// let permissionList1 = ref([])
let permissionList1 = ref([])
let permissionList2 = ref([])
let permissionList3 = ref([])
let permissionList4 = ref([])
let permissionList5 = ref([])

const onDragEnter = () => {
  console.log(111)
  console.log(dataList.value)
}
const onDrop = () => {
  console.log(111)
  console.log(dataList.value)
}

//角色树形被点击后执行的方法
const getRole = (id) => {
  console.log(id)
  getPermissionAPI(id)
  table.roleId = id
  getRoleListAPI()
}
//人数vue
const userTotal = ref(0)

//默认选中
const selectedKeys = ref('2')

//表格查询参数
const table = {
  roleId: 2,
  page: 1,
  pageSize: 10,
  total:0
}
//表格内容数据
const tableList = reactive({
  dataSource: [],
  columns: [
    {
      title: '序号',
      dataIndex: 'index'
    },
    {
      title: '员工姓名',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '登录账号',
      dataIndex: 'userName',
      key: 'userName'
    }
  ],
  //角色权限数据
  perms:[]
})
//解构表单数据
const { dataSource, columns, perms } = toRefs(tableList)

// 获取角色权限api
const getPermissionAPI = async (id) => {
  const res = await getPermission(id)
  userTotal.value = res.data.userTotal
  tableList.perms = res.data.perms
  console.log(res)
}

// 获取角色关联的用户列表
const getRoleListAPI = async () => {
  const res = await getRoleList(table)
  tableList.dataSource = res.data.rows
  table.total = res.data.total
}

//点击编辑跳转
const changge = (roleId)=>{
  console.log(roleId)
  router.push({
    path:'/system/role/add',
    query:{
      roleId
    }

  })
}

//点击删除
const delRoleAPI= async (id)=>{  
  await delRole(id)
  message.success('删除成功')
  await getTree()
}

//获取树形结构
const getTree = async ()=>{

}

//生命周期
onMounted(async () => {
  const { data } = await PermissionList()
  data.forEach((item) => {
    dataList.value.push({ ...item, key: data.roleId, title: data.roleName })
  })
  const res = await getPermissionList()
  permissionList1.value.push(res.data[0])
  permissionList2.value.push(res.data[1])
  permissionList3.value.push(res.data[2])
  permissionList4.value.push(res.data[3])
  permissionList5.value.push(res.data[4])
  console.log(data)
})
</script>
<template>
  <div class="container">
    <div class="permission">
      <div class="permission_left">
        <a-tree
          class="draggable-tree"
          block-node
          :tree-data="dataList"
          :showLine="false"
          show-icon
          @dragenter="onDragEnter"
          @drop="onDrop"
          v-model:selectedKeys="selectedKeys"
        >
          <template #icon>
            <!-- <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-31haoyou"></use>
                </svg> -->
          </template>
          <template #title="{ roleId, roleName }">
            <div class="tree_title">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-31haoyou"></use>
              </svg>
              <span @click="getRole(roleId)">{{ roleName }}</span>
              <span>
                <a-dropdown :trigger="['click']">
                  <a class="ant-dropdown-link" @click.prevent>
                    #
                    <!-- <DownOutlined /> -->
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item key="0">
                        <!-- <router-link to="/system/role/add/roleId=">编辑角色</router-link> -->
                        <a  @click="changge(roleId)">编辑</a>
                      </a-menu-item>
                      <a-menu-item key="1">
                        <a href="javascript:;" @click="delRoleAPI(roleId)">删除</a>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </span>
            </div>
          </template>
        </a-tree>
        <a-button><router-link to="/system/role/add">添加角色</router-link></a-button>
      </div>
      <div class="permission_right">
        <a-tabs class="a_tabs" v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="功能权限">
            <div class="tabs_container">
              <div style="height: 500px">
                <span class="ele-style">园区管理</span>
                <a-tree v-model:checkedKeys="perms[0]" :fieldNames="{key:'id'}" checkable :tree-data="permissionList1" disabled :defaultExpandAll="true" v-if="permissionList1?.length">
                  <template #title="{ title, id }">
                    <span>{{ title }}{{ id }}</span>
                  </template>
                </a-tree>
              </div>
              <div style="height: 500px">
                <span class="ele-style">行车管理</span>
                <a-tree v-model:checkedKeys="perms[1]" :fieldNames="{key:'id'}" checkable :tree-data="permissionList2" disabled  :defaultExpandAll="true" v-if="permissionList1?.length">
                  <template #title="{ title, id }">
                    <span>{{ title }}{{ id }}</span>
                  </template>
                </a-tree>
              </div>
              <div style="height: 500px">
                <span class="ele-style">物业费管理</span>
                <a-tree  v-model:checkedKeys="perms[2]" :fieldNames="{key:'id'}" checkable :tree-data="permissionList3" disabled  :defaultExpandAll="true" v-if="permissionList1?.length">
                  <template #title="{ title, id }">
                    <span>{{ title }}{{ id }}</span>
                  </template>
                </a-tree>
              </div>
              <div style="height: 500px">
                <span class="ele-style">一体杆管理</span>
                <a-tree  v-model:checkedKeys="perms[3]" :fieldNames="{key:'id'}" checkable :tree-data="permissionList4" disabled :defaultExpandAll="true" v-if="permissionList1?.length">
                  <template #title="{ title, id }">
                    <span>{{ title }}{{ id }}</span>
                  </template>
                </a-tree>
              </div>
              <div style="height: 500px">
                <span class="ele-style">系统管理</span>
                <a-tree  v-model:checkedKeys="perms[4]" :fieldNames="{key:'id'}" checkable :tree-data="permissionList5" disabled :defaultExpandAll="true" v-if="permissionList1?.length">
                  <template #title="{ title, id }">
                    <span>{{ title }}{{ id }}</span>
                  </template>
                </a-tree>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="'成员(' + userTotal + ')'" force-render>
            <a-table :dataSource="dataSource" :size="small" :columns="columns" :pagination="false">
              <template #bodyCell="{ column, index }">
                <div v-if="column.dataIndex === 'index'">
                  {{ (table.page - 1) * table.pageSize + index + 1 }}
                </div>
              </template>
              <template v-slot:emptyText>
                <div><img src="@/assets/emptyText.png" alt="" /></div>
              </template>
            </a-table>
            <a-pagination
            v-model:current="table.page"
            v-model:page-size="table.pageSize"
            :total="table.total"
            :show-total="(total) => `共 ${table.total} 条`"
          />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  padding: 0 20px;
  width: 100%;
//   height: 700px;
  .permission {
    display: flex;
    justify-content: space-between;
    width: 100%;
    // height: 700px;
    // background-color: #fff;
    .permission_left {
      width: 280px;
      min-width: 200px;
    //   height: 800px;
        background-color: #fff;
      /* 去掉样式 */
      .ant-tree-switcher {
        width: 0;
        height: 56px;
        line-height: 56px;
      }
      .tree_title {
        display: flex;
        justify-content: space-between;
      }
    }
    .permission_right {
      //   background-color: green;
      width: 100%;
    //   height: 800px;
      .tabs_container {
        display: flex;
        & > div {
          flex: 1;
        }
      }
      .a_tabs {
        background-color: #fff;
      }
    }
  }
}
.ele-style{
    display:inline-block;
    text-align: center;
    width: 130px !important;
    height: 44px;
    padding: 10px 0;
    background-color: rgb(245,247,250)
}
</style>
